<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人主页</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />



	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>

	<script src="./js/vote.js"></script>
	<style>
		.el-table .warning-row {
			background: oldlace;
		}

		.el-table .success-row {
			background: #f0f9eb;
		}
	</style>


</head>
<body>
<div id="app">

	<vote  >
		<div id="vote" class="wrap">
			<h2>个人主页</h2>
			<el-container>
				<el-aside style="width: 200px">
					<el-menu >
						<el-menu-item index="2">
							<i class="el-icon-menu"></i>
							<span slot="title">我的信息</span>
						</el-menu-item>
						<el-menu-item index="3"  @click="faqi">
							<i class="el-icon-document" ></i>
							<span slot="title"  >我发起的投票</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">我参与的投票</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">我评论的投票</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">我关注的投票</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<el-form v-if="geren" ref="form" label-width="80px" style="width: 300px">
						<el-form-item label="头像" style="text-align: center">

							<el-avatar style="cursor: pointer"  :size="100" :src="user.avatar"  @click.native="$refs.fileinput.click()" >

							</el-avatar>
							<input style="display:none;" ref="fileinput" @change="upload" type="file" name="file">



						</el-form-item>
						<el-form-item label="邮箱">
							<el-input v-model="user.email"></el-input>
						</el-form-item>
						<el-form-item label="电话">
							<el-input v-model="user.telephone"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="updateUser">修改</el-button>
							<el-button>取消</el-button>
						</el-form-item>
					</el-form>
					<template v-if="fabu">
						<el-table
								:data="tableData"
								style="width: 100%"
								:row-class-name="tableRowClassName">
							<el-table-column
									prop="date"
									label="日期"
									width="180">
							</el-table-column>
							<el-table-column
									prop="name"
									label="姓名"
									width="180">
							</el-table-column>
							<el-table-column
									prop="address"
									label="地址">
							</el-table-column>
						</el-table>
					</template>
				</el-main>




			</el-container>
		</div>
	</vote>


</div>


<script>
	var v = new Vue({
		el : "#app",
		data : {
			user:{ id: "",email: "", telephone: "" , avatar: ""},
			geren: true,
			fabu: false,
			return :{
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}]
			},



		},
		created() {
			axios.get("/vote/user/selectUser" ).then(res => {
				console.log(res.data.data);
				this.user.email = res.data.data.email;
				this.user.telephone = res.data.data.telephone;
				this.user.avatar = res.data.data.avatar;
				this.user.id = res.data.data.id;
				if (res.data.data.avatar == null) {
					this.user.avatar = "https://img2.baidu.com/it/u=85996889,2750756434&fm=253&fmt=auto&app=138&f=JPEG?w=324&h=324";
				}
				else {
					this.user.avatar = res.data.data.avatar;
				}
			})

		},
		methods : {
			tableRowClassName({row, rowIndex}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			upload(){
				/*用于存储表单数据，这里将用于存储要上传的文件。*/
				var fd = new FormData();
				/* 获取表单中类型为文件输入的元素，即 <input type='file'> 元素，赋值给变量 fl。*/
				var fl = document.querySelector("form input[type='file']");
				/*append("file", fl.files[0]) 方法用于向 FormData 对象中添加一个新的键值对，
                其中 "file" 是键名，表示上传文件的字段名，fl.files[0] 是值，表示用户选择的文件对象。
                fl.files[0] 表示该文件输入元素中用户选择的第一个文件对象。*/
				fd.append("file", fl.files[0]);



				axios.post("upload/one/image",fd).then(res=>{
					//console.log(res.data);
					let apiUrl = window.location.origin;
					this.user.avatar = apiUrl+"/"+ res.data;
					//console.log( apiUrl+"/"+ res.data);

				})
			},
			updateUser() {
				axios.post("/vote/user/upuser", this.user).then(res => {
					if(res.data.code == 1){
						alert("修改成功");
					}
					else{

						alert("修改失败");
					}

				})
			},
			faqi() {
				this.geren = false;
				this.fabu = true;



			}

		},

	})
</script>

</body>
</html>
